<template>
  <aside class="ent-sidebar w-64 h-full shadow-enterprise-md">
    <!-- 顶部Logo区域 -->
    <div class="p-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
      <div class="flex items-center">
        <img src="../assets/logo.svg" alt="Logo" class="w-8 h-8 mr-3" />
        <h2 class="text-xl font-semibold text-primary-600 dark:text-primary-400">Text<span class="text-accent-600 dark:text-accent-400">2</span>SQL</h2>
      </div>
      <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">企业级数据分析平台</p>
    </div>

    <!-- 导航菜单 -->
    <nav class="flex-1 overflow-y-auto py-4 ent-scrollbar">
      <AccordionNav @select-query="handleSelectQuery" @show-training="handleShowTraining" @show-main="handleShowMain" />
    </nav>

    <!-- 底部状态区域 -->
    <div class="p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
      <div class="flex items-center text-sm text-gray-600 dark:text-gray-400">
        <div class="w-2 h-2 rounded-full bg-green-500 mr-2"></div>
        <span>已连接到数据库</span>
      </div>
      <div class="mt-2 text-xs text-gray-500 dark:text-gray-500">
        <a href="#" class="hover:text-primary-500 dark:hover:text-primary-400 transition-colors">
          连接设置
        </a>
        <span class="mx-2">|</span>
        <a href="#" class="hover:text-primary-500 dark:hover:text-primary-400 transition-colors">
          帮助文档
        </a>
      </div>
    </div>
  </aside>
</template>

<script>
import AccordionNav from './AccordionNav.vue'

export default {
  name: 'Sidebar',
  components: {
    AccordionNav
  },
  emits: ['select-query', 'show-training', 'show-main'],
  setup(props, { emit }) {
    const handleSelectQuery = (query) => {
      emit('select-query', query)
    }
    const handleShowTraining = () => {
      emit('show-training')
    }
    const handleShowMain = () => {
      emit('show-main')
    }

    return {
      handleSelectQuery,
      handleShowTraining,
      handleShowMain
    }
  }
}
</script>

<style scoped>
.ent-sidebar {
  transition: all 0.3s ease;
}
</style>
